<template>
  <div class="repair-detail">
    <el-card class="box-card">
      <!-- 标题和操作按钮 -->
      <div class="header">
        <h2 class="title">生产线电机故障报修</h2>
        <div class="operations">
          <el-button
            type="success"
            size="small"
            plain
            icon="el-icon-check">
            流转
          </el-button>
          <el-button
            type="primary"
            size="small"
            plain
            icon="el-icon-download">
            导出
          </el-button>
          <el-button
            type="primary"
            size="small"
            plain
            icon="el-icon-printer">
            打印
          </el-button>
        </div>
      </div>

      <!-- 设备基本信息 -->
      <div class="info-section">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <span class="label">设备名称：</span>
              <span class="value">液压泵</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">设备编号：</span>
              <span class="value">YP12345</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">设备类型：</span>
              <span class="value">HP-250</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <span class="label">规格型号：</span>
              <span class="value">液压设备</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">存放位置：</span>
              <span class="value">车间A区</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">使用部门：</span>
              <span class="value">生产部</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 标签页 -->
      <div class="tab-section">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="报修信息" name="repair"></el-tab-pane>
          <el-tab-pane label="执行进度" name="progress"></el-tab-pane>
        </el-tabs>
      </div>

      <!-- 未完工图标 -->
      <div class="status-stamp" style="margin-top: 75px;">
        <img src="" alt="未完工" />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'RepairDetail',
  data() {
    return {
      activeTab: 'repair',
      equipmentInfo: {
        name: '液压泵',
        code: 'YP12345',
        type: 'HP-250',
        spec: '液压设备',
        location: '车间A区',
        department: '生产部'
      }
    }
  }
}
</script>

<style scoped>
.repair-detail {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.operations {
  display: flex;
  gap: 10px;
}

.info-section {
  padding: 20px 0;
  border-bottom: 1px solid #EBEEF5;
}

.info-item {
  margin-bottom: 15px;
}

.label {
  color: #606266;
  margin-right: 8px;
}

.value {
  color: #303133;
}

.tab-section {
  margin-top: 20px;
}

.status-stamp {
  position: absolute;
  top: 50px;
  right: 50px;
  width: 120px;
  height: 120px;
  opacity: 0.6;
}

.status-stamp img {
  width: 100%;
  height: 100%;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .repair-detail {
    padding: 10px;
  }

  .header {
    flex-direction: column;
    gap: 15px;
  }

  .operations {
    width: 100%;
    justify-content: flex-end;
  }

  .el-col {
    width: 100% !important;
  }

  .info-item {
    margin-bottom: 10px;
  }

  .status-stamp {
    width: 80px;
    height: 80px;
    top: 30px;
    right: 30px;
  }
}
</style>
